<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>css opacity</title>
    <style type="text/css">
        .container{
            background-color: rgb(179, 255, 0);
            width: 100%;
            height: 100%;
        }
        .p-div{
            background-color:darkgray;
            background:rgba(0, 0, 0, 0.5);
            opacity:0.3;
            position: fixed;
            margin: 10px;

        }
        .sub-div{
            opacity:1;
            background-color:red;
            position:relative;
            margin-top:5px;
        }
    </style>
  </head>
  <body>
    
    <div class="container">
        <h1>Bootstrop</h1>
        <button type="button" id="btn">modal</button>
        <div class="p-div">
            <h4>父级div</h4>
            <div class="sub-div">
                <span>子级DIV</span>
            </div>
        </div>
    </div>
  </body>

</html>
